<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹窗</title>
    <style>
      /* 弹窗 */
      .modal {
        display: none; /* 默认隐藏 */
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        -webkit-animation-name: fadeIn;
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s;
      }

      /* 弹窗内容 */
      .modal-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 100%;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
      }

      /* 关闭按钮 */
      .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }

      .modal-header {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
      }

      .modal-body {
        padding: 2px 16px;
      }

      .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
      }

      /* 添加动画 */
      @-webkit-keyframes slideIn {
        from {
          bottom: -300px;
          opacity: 0;
        }
        to {
          bottom: 0;
          opacity: 1;
        }
      }

      @keyframes slideIn {
        from {
          bottom: -300px;
          opacity: 0;
        }
        to {
          bottom: 0;
          opacity: 1;
        }
      }

      @-webkit-keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <!-- 打开弹窗按钮 -->
    <button id="myBtn">打开弹窗</button>

    <!-- 弹窗 -->
    <div id="myModal" class="modal">
      <!-- 弹窗内容 -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>弹窗头部</h2>
        </div>
        <div class="modal-body">
          <p>弹窗文本...</p>
          <p>弹窗文本...</p>
        </div>
        <div class="modal-footer">
          <h3>弹窗底部</h3>
        </div>
      </div>
    </div>
    <script>
      // 获取弹窗
      var modal = document.getElementById("myModal");

      // 打开弹窗的按钮对象
      var btn = document.getElementById("myBtn");

      // 获取 <span> 元素，用于关闭弹窗 that closes the modal
      var span = document.getElementsByClassName("close")[0];

      // 点击按钮打开弹窗
      btn.onclick = function () {
        modal.style.display = "block";
      };

      // 点击 <span> (x), 关闭弹窗
      span.onclick = function () {
        modal.style.display = "none";
      };

      // 在用户点击其他地方时，关闭弹窗
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    </script>
  </body>
</html>
